<template>
  <view class="mine-container">
		<view class="header-section">
			<view class="exit-btn"  @click="logout" ></view>
			<view class="porfile">
				<view class="avatar">
					<image src="../../static/images/avatar.png" style="width: 100%;height: 100%;" class="cu-avatar xl" mode="full">
					</image>
				</view>
				<view class="username">Username</view>
			</view>
		</view>
		<view class="content-section">
			<view class="group-type-1">
				<view class="contnet-item">
					<view class="item-icon icon-device"></view>
					<view class="item-title">My Devices</view>
					<view class="arrow"></view>
				</view>
				<view class="contnet-item">
					<view class="item-icon icon-album"></view>
					<view class="item-title">My Album</view>
					<view class="arrow"></view>
				</view>
			</view>
			<view class="group-type-2">
				<view class="contnet-item">
					<view class="item-title" @click="toProfile">Porfile</view>
					<view class="arrow"></view>
				</view>
				<view class="contnet-item">
					<view class="item-title">Change Password </view>
					<view class="arrow"></view>
				</view>
			</view>
			<view class="group-type-2">
				<view class="contnet-item">
					<view class="item-title">Problem Feedback</view>
					<view class="arrow"></view>
				</view>
				<view class="contnet-item">
					<view class="item-title">About US</view>
					<view class="arrow"></view>
				</view>
			</view>
		</view>
  </view>
</template>

<script setup>
  import storage from '@/utils/storage'
  import store from '@/store'
  import { ref } from "vue";
  import { useRouter } from "vue-router";
  import config from '@/config.js';
	import { showConfirm } from '@/utils/common'
  const name=store.state.user.name;
  const version= config.appInfo.version;
  const avatar=ref(store.state.user.avatar);
	const router = useRouter();
	
	const toProfile = ()=>{
		// router.push('/pages/mine/profile')
		uni.navigateTo({
			url: '/pages/mine/profile',
			success: function () {
				// 成功跳转后的回调（可选）
			},
			fail: function () {
				// 失败的回调（可选）
			}
		});
	}
	
	
	const logout = ()=>{
		showConfirm('Are you sure you want to log out?').then(res => {
		  if (res.confirm) {
		    store.dispatch('LogOut').then(res => {
		      uni.reLaunch({ url: '/pages/login' })
		    })
		  }
		})
	}
	
  
  
</script>

<style lang="scss" scoped>
  .mine-container {
    width: 100%;
    height: 100%;
		.header-section{
			position: relative;
			width: 100%;
			height: 615rpx;
			background-image: url('../../static/images/mine-bg.png');
			background-size: 100% 100%;
			overflow: hidden;
			.exit-btn{
				width: 58rpx;
				height: 58rpx;
				background-image: url('../../static/images/icons/exit.png');
				background-size: contain;
				position: absolute;
				top: 83rpx;
				right: 34.4rpx;
			}
			.porfile{
				margin-top: 200rpx;
				.avatar{
					width: 206.19rpx;
					height: 206.19rpx;
					background: #D8D8D8;
					box-shadow: 0 15.19rpx 46.73rpx 0 #0000004f;
					border-radius: 29.21rpx;
					margin: 0 auto;
					overflow: hidden;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.username{
					margin-top: 30rpx;
					height: 43.81rpx;
					font-weight: 600;
					font-size: 31.54rpx;
					color: #FFFFFF;
					text-align: center;
				}
			}
		}
		
		.content-section{
			margin-top: 90rpx;
			padding: 0 50rpx;
			.group-type-1{
				display: flex;
				flex-wrap: nowrap;
				width: 100%;
				height: 110rpx;
				.contnet-item{
					border-radius: 20rpx;
					overflow: hidden;
					&:nth-child(1){
						margin-right: 23rpx;
					}
				}
			}
			.group-type-2{
				display: flex;
				flex-direction: column;
				border-radius: 20rpx;
				background-color: #fff;
				margin-top: 35rpx;
				overflow: hidden;
				.contnet-item{
					flex: 0 0 110rpx;
				}
			}
			.contnet-item{
				background-color: #fff;
				flex: 1;
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				justify-content: flex-start;
				padding: 20rpx;
				.item-icon{
					width: 46rpx;
					height: 46rpx;
					background-size: 100% 100%;
					&.icon-device{
						background-image: url('../../static/images/icons/device.png');
					}
					&.icon-album{
						background-image: url('../../static/images/icons/album.png');
					}
				}
				.item-title{
					flex: 1;
					font-weight: 600;
					font-size: 28.04rpx;
					color: #222222;
					margin-left: 8rpx;
					text-align: left;
				}
				.arrow{
					flex: 0 0 44.39rpx;
					height: 44.39rpx;
					background-color: #F7F7F7;
					border-radius: 15.77rpx;
					background-image: url('../../static/images/icons/arrow-down.png');
					background-size: 100% 100%;
					transform: rotate(-90deg);
				}
			}
		}
  }
</style>
